<template>
  <div class="bestbox">
    <!-- 头部 -->
    <div class="topbox">
        <img :src="imgSrc" width="100%" height="100%"  />
        <div class="topCenter">
          <!-- <div class="pictrue">
            <img :src="imgCenter" width="100%" height="100%" >
          </div> -->
          <div class="Text">阿甘</div>
          <div class="number">18736718228</div>
        </div>
        <div class="editText" @click="editClick" >
          编辑
        </div>
        <!-- 编辑弹出层 -->
        <van-popup closeable close-icon-position="top-left" v-model="editshow" round  :style="{ height: '30%',width:'70%' }">
          <div class="confrimedit" @click="confirmClick">确定</div>
          <div class="editInfo">
            <van-cell-group>
              <van-field v-model="value" label="名字" placeholder="请输入" />
              <van-field v-model="value" label="电话号" placeholder="请输入用户名" />
            </van-cell-group>
          </div>
        </van-popup>
    </div>
    <!-- 中间部分 -->
    <div class="CenterText">
      <!-- 中间部分 -->
       <div class="selectIdear" @click="clickIdear">
        选购意向
      </div>
      <div class="oldcarInfo" @click="cliclOldCar">
          旧车信息
      </div>
      <div class="centerLeftPictrue"  v-show="showLeft" >
        <div class="aaaa">
          <div class="carname">车型的详细信息</div>
          <div class="selectCar" @click="NewcarModel" >{{computeCarNmae}}</div>
          <!-- <span class="selectCar">请选择时尚车型</span> -->
          <van-row class="detailPrice">
            <van-col span="8">
              <span class="exatInfo">新车指导价</span>
            </van-col>
            <van-col span="8">
              <span class="exatInfo">新车优惠价</span>
            </van-col>
            <van-col span="8">
              <span class="exatInfochange">优惠金额</span>
            </van-col>
          </van-row>
          <van-row>
            <van-col span="8">
              <span class="exatInfocu">{{NewPrice}}</span>
            </van-col>
            <van-col span="8">
              <!-- <span class="dazhe">20.4万</span> -->
             <input v-on:blur="ClickInputNewCar($event)"  placeholder="请输入" class="inputText" type="text" v-model="newCarCoupon">
            </van-col>
            <van-col span="8">
              <span class="youhuimoeny">{{accountPrice}}</span>
            </van-col>
          </van-row>

        </div>
      </div>
      <div class="centerRightPictrue" v-show="showRight" >
       <div class="rightaear">
          <div class="carname">车型的详细信息</div>
          <div class="selectCar" @click="selectCattype">{{carNmae}}</div>
          <van-cell-group>
            <!-- 车牌号码 -->
          <van-field v-model="oldData.oldCarPlateNumber"  type="number"  label="车牌号码" placeholder="点击选择车牌号码" />
          <!-- vin -->
            <van-field
              v-model="oldData.oldCarVin"
              label="VIN"
              right-icon="scan"
              placeholder="显示图标"
            />
            <!-- 日历 -->
            <van-field
              readonly
              clickable
              name="calendar"
              :value="oldData.createDate"
              label="日历"
               right-icon="notes-o"
              placeholder="点击选择日期"
              @click="showCalendar = true"
            />
            <van-calendar v-model="showCalendar" @confirm="onConfirm" />
            <!-- 行驶里程 -->
            <van-field v-model="oldData.oldCarMileage"  type="number"  label="行驶里程" placeholder="输入行驶里程" />
            <!-- 颜色 -->
            <van-field
              readonly
              clickable
              name="picker"
              :value="oldData.oldCarColor"
              label="颜色"
              placeholder="点击选择颜色"
              @click="showPicker = true"
            />
            <van-popup v-model="showPicker" position="bottom">
              <van-picker
                show-toolbar
                :columns="colorcolumns"
                @confirm="onConfirmColor"
                @cancel="showPicker = false"
              />
            </van-popup>
            <!-- 获取价格 -->
            <van-field
              v-model="oldData.purchPrice"
              center
              clearable
              label="收购价格"
              type="number"
            >
              <template #button>
                <div @click="getpriceaa" class="gainPrice">获取价格</div>
              </template>
            </van-field>
            <!-- 置换补贴 -->
            <div class="changeGain">置换补贴</div>
            <van-field
              v-model="oldData.replaceSubsidy"
              rows="2"
              autosize
              type="number"
              placeholder="请输入内容"
              show-word-limit
            />
          </van-cell-group>
       </div>
      </div>
      <!-- 付款方式 -->
      <div class="paySumit">
        <div class="paymentWay">付款方式</div>
        <div class="tabBoxVant">
        <van-tabs v-model="activeName" color='#3c80f1' title-active-color='#414141'>
          <van-tab title="全额付款" name="a">
            <div class="payMentMony" >
              <van-row>
                <van-col  offset="2" span="8">
                  <span class="paymony">支付金额</span>
                </van-col>
                <van-col offset="6" span="5">
                  <span class="moneyDetail">{{newCarCoupon}}</span>
                </van-col>
              </van-row>
            </div>
          </van-tab>
          <van-tab title="信贷" name="b">
            <div class="Credit">
              <van-field
                readonly
                clickable
                name="picker"
                :value="bank"
                label="贷款银行"
                right-icon="arrow-down"
                placeholder="请选择银行"
                @click="showPickerbank = true"
              />
              <van-popup v-model="showPickerbank" position="bottom">
                <van-picker
                  show-toolbar
                  :columns="columnsbank"
                  @confirm="onConfirmbank"
                  @cancel="showPickerbank = false"
                />
              </van-popup>
              <!-- 期数 -->
              <div class="qishuBoxwai">
                <div v-for="(item,index) in rateDataArray" :class="{ selected: selected === index }" @click="SelectClick(item,index)" :key="index" class="Seletedbox">{{item.policyDuration}}期</div>
              </div>
             <!-- <van-slider v-model="progressvalue" /> -->
             <!-- <van-slider v-model="progressvalue" @change="onChange" /> -->
             <div class="yearsRateAndCheck">
                <div class="yeartateInout">
                  <van-cell-group>
                    <van-field :disabled='disabledChange'  @input="Ratechange"  v-model="rateInfo.customRate" label="年利率(%)"  type="number"  placeholder="请输入" />
                  </van-cell-group>
                </div>
                <div class="checkBox">
                  <van-checkbox-group v-model="checkradioFuaa" @change="trueHaveMoney">
                    <van-checkbox v-show="controlEnd" :checked=false name="a">有尾款</van-checkbox>
                    <van-checkbox v-show="controlDi" name="b">低息</van-checkbox>
                  </van-checkbox-group>
                </div>
              </div>
              <div class="fristpayRate">首付比例</div>
              <div class="BoxSlider">
                <div class="sliderRight">{{payMinRatio}}%</div>
                <div class="sliderLeft">
                  <van-slider bar-height='8px' :min="payMinRatio"  :max="payMaxRatio"  button-size='20px' v-model="slidervalue" @change="onChange" />
                </div>
                <div class="sliderRight">{{slidervalue}}%</div>
              </div>
              <!-- 单选框 -->
              <van-radio-group v-model="radio">
                <!-- <div class="bankRate"> -->
                  <!-- <div class="bankRatefrist">

                     <div class="radiobox">
                       <van-radio name="1"  icon-size='15px'></van-radio>
                     </div>

                     <div class="kongxin"></div>

                     <div class="yearsRate">1年利息</div>
                  </div> -->
                  <!-- <div class="bankRatesecond">
                    <div class="radiobox">
                      <van-radio name="2" icon-size='15px' ></van-radio>
                    </div>

                     <div class="kongxin"></div>

                     <div class="yearsRate">18期利息</div>
                  </div> -->
                  <!-- <div class="bankRatetheri">
                    <div class="radiobox">
                      <van-radio name="3" icon-size='15px'></van-radio>
                    </div>

                     <div class="kongxin"></div>

                     <div class="yearsRate">2年利息</div>
                  </div> -->
                <!-- </div> -->
                <!-- <div class="checkMore">查看更多</div> -->
                <div class="Rectangle" >

                </div>

                <div class="progress">
                  <!-- <van-progress
                    :percentage="7"
                    pivot-color="##fbfbfd"
                    stroke-width='8px'
                    color="linear-gradient(to right, #4296d4, #0d6eb5)"
                  /> -->
                </div>
                <div class="centerBestlow">
                  <div class="lowaa">
                    <div class="fristPatment">首付</div>
                    <div class="PaymentPrice">
                      <span class="pricedetailaa">{{fristPayment}}</span>
                      <span class="pricedetailbb">元</span>
                    </div>
                  </div>
                  <div class="lowbb">
                    <div class="fristPatment">尾款</div>
                    <div class="PaymentPrice" @click='boxchangeRate'>
                      <input  :disabled='ControlShowInputEnd'  placeholder="请输入" class="inputText" type="text" v-model="carBoatValue">
                      <!-- <span class="pricedetailaa">3.85</span>
                      <span class="pricedetailbb">%</span> -->
                    </div>
                     <!-- 弹出框 -->
                    <van-popup  closeable close-icon-position="top-left" round :style="{ height: '30%',width:'70%' }" v-model="boxchangeRateShow">
                      <div class="CloseChangeRate" @click="changeRateClose">确定</div>

                      <div class="stepBoxLength">
                        <div class="stepLeft">{{MinValue}}%</div>
                        <div class="stepCenter">
                          <van-stepper v-model="stepvalue" :min="MinValue" :max="MaxValue" step="5" />
                        </div>
                        <div class="stepRight">{{MaxValue}}%</div>
                      </div>
                    </van-popup>
                  </div>
                  <div class="lowcc">
                    <div class="fristPatment">月供</div>
                    <div class="PaymentPrice">
                      <span class="pricedetailaa">{{monthGong}}</span>
                      <span class="pricedetailbb">元</span>
                    </div>
                  </div>
                </div>
              </van-radio-group>
            </div>

          </van-tab>
        </van-tabs>
        </div>
      </div>
      <!-- 保险服务 -->
      <div class="insuranceaa">
        <div class="paymentWay">保险&服务</div>
        <div class="insureTab">
          <van-tabs v-model="InsureactiveName">
            <van-tab title="保险" name="a">
              <div class="tabAText">
                  <div class="insureTepy">保险类别</div>
                  <div class="shouPrice">售价</div>
                </div>
              <div>
              <div v-for="(item,index) in initbankData" :key="index" >
                <div class="insureTextInfo">
                  <div class="carBoatprice">{{item.insuranceName}}</div>
                    <div class="PedometerWalk" v-show='item.variableValue' >

                     <van-stepper v-show="item.insuranceName==='三责险'" min="50" max="300" step="10" >{{item.variableValue}}</van-stepper>
                     <van-stepper v-show="item.insuranceName==='驾乘险'"  min="1" max="10" step="1" >{{item.variableValue}}</van-stepper>

                    </div>
                  <!-- 输入框 -->
                  <input class="inputText" type="text" v-model="item.insurancePrice" placeholder="请输入" >
                </div>
              </div>
                <!-- <div class="insureTextInfo">
                  <div class="carBoatprice">交强险</div> -->
                  <!-- 输入框 -->
                  <!-- <input class="inputText" type="text" v-model="carBoatValue" placeholder="请输入" >
                </div> -->
                <!-- <div class="insureTextInfo">
                  <div class="carBoatpriceexst">三责险</div> -->
                  <!-- 计步器 -->
                  <!-- <div class="PedometerWalk">
                    <van-stepper v-model="WalkValue" min="50" max="300" step="50" />
                  </div> -->
                  <!-- 输入框 -->
                  <!-- <input  v-model="carBoatValue"  class="inputText" type="text" placeholder="请输入" >
                </div>
                <div class="insureTextInfo">
                  <div class="carBoatprice">车损险</div> -->
                  <!-- 输入框 -->
                  <!-- <input class="inputText" type="text" v-model="carBoatValue" placeholder="请输入" >
                </div>
                <div class="insureTextInfo">
                  <div class="carBoatpriceexst">驾乘险</div> -->
                  <!-- 计步器 -->
                  <!-- <div class="PedometerWalk">
                    <van-stepper v-model="WalkValue" min="1" max="7" step="1" />
                  </div> -->
                  <!-- 输入框 -->
                  <!-- <input  v-model="carBoatValue"  class="inputText" type="text" placeholder="请输入" >
                </div> -->
                <!-- 底部图标位置 -->
                <div class="addBox">
                  <div class="addBoxCenter">
                    <div class="addIcon">
                      <van-icon size="25" name="plus" color="#3C80F1" />
                    </div>
                    <div class="adddText">添加类型</div>
                  </div>
                </div>
              </div>
            </van-tab>
            <van-tab title="延保服务" name="b">
              <div>
                <!-- 报信类别 -->
                <div class="tabAText">
                  <div class="insureTepy">保险类别</div>
                  <div class="shouPrice">活动价</div>
                </div>
                <!-- 每一行区域 -->
                <div class="rightInput">
                  <!-- 左右两个盒子 -->
                  <div class="rightIputBoxR">
                    <!-- 上下盒子 -->
                    <div class="rightIputshang">1年&nbsp;3万公里</div>
                    <div class="rightIputxia">
                      <div class="comBackprice">市场价</div>
                      <div class="comBackdigi">2589</div>
                    </div>
                  </div>
                  <!-- 输入框 -->
                  <div class="rightIputBoxL">
                    <!-- 输入框 -->
                     <input class="inputText" type="text" v-model="carBoatValue" placeholder="请输入" >
                  </div>
                </div>
                <!-- 每一行区域 -->
                <div class="rightInput">
                  <!-- 左右两个盒子 -->
                  <div class="rightIputBoxR">
                    <!-- 上下盒子 -->
                    <div class="rightIputshang">2年&nbsp;6万公里</div>
                    <div class="rightIputxia">
                      <div class="comBackprice">市场价</div>
                      <div class="comBackdigi">5198</div>
                    </div>
                  </div>
                  <!-- 输入框 -->
                  <div class="rightIputBoxL">
                    <!-- 输入框 -->
                     <input class="inputText" type="text" v-model="carBoatValue" placeholder="请输入" >
                  </div>
                </div>
                <!-- 每一行区域 -->
                <div class="rightInput">
                  <!-- 左右两个盒子 -->
                  <div class="rightIputBoxR">
                    <!-- 上下盒子 -->
                    <div class="rightIputshang">3年&nbsp;6万公里</div>
                    <div class="rightIputxia">
                      <div class="comBackprice">市场价</div>
                      <div class="comBackdigi">8998</div>
                    </div>
                  </div>
                  <!-- 输入框 -->
                  <div class="rightIputBoxL">
                    <!-- 输入框 -->
                     <input class="inputText" type="text" v-model="carBoatValue" placeholder="请输入" >
                  </div>
                </div>
                 <!-- 重要部位-->
                <div class="tabAText">
                  <div class="insureTepy">重要部位</div>
                  <div class="shouPrice">活动价</div>
                </div>
                <!-- 每一行区域 -->
                <div class="rightInput">
                  <!-- 左右两个盒子 -->
                  <div class="rightIputBoxR">
                    <!-- 上下盒子 -->
                    <div class="rightIputshang">1年&nbsp;3万公里</div>
                    <div class="rightIputxia">
                      <div class="comBackprice">市场价</div>
                      <div class="comBackdigi">1398</div>
                    </div>
                  </div>
                  <!-- 输入框 -->
                  <div class="rightIputBoxL">
                    <!-- 输入框 -->
                     <input class="inputText" type="text" v-model="carBoatValue" placeholder="请输入" >
                  </div>
                </div>
                <!-- 每一行区域 -->
                <div class="rightInput">
                  <!-- 左右两个盒子 -->
                  <div class="rightIputBoxR">
                    <!-- 上下盒子 -->
                    <div class="rightIputshang">2年&nbsp;6万公里</div>
                    <div class="rightIputxia">
                      <div class="comBackprice">市场价</div>
                      <div class="comBackdigi">2589</div>
                    </div>
                  </div>
                  <!-- 输入框 -->
                  <div class="rightIputBoxL">
                    <!-- 输入框 -->
                     <input class="inputText" type="text" v-model="carBoatValue" placeholder="请输入" >
                  </div>
                </div>
                <!-- 每一行区域 -->
                <div class="rightInput">
                  <!-- 左右两个盒子 -->
                  <div class="rightIputBoxR">
                    <!-- 上下盒子 -->
                    <div class="rightIputshang">3年&nbsp;8万公里</div>
                    <div class="rightIputxia">
                      <div class="comBackprice">市场价</div>
                      <div class="comBackdigi">4798</div>
                    </div>
                  </div>
                  <!-- 输入框 -->
                  <div class="rightIputBoxL">
                    <!-- 输入框 -->
                     <input class="inputText" type="text" v-model="carBoatValue" placeholder="请输入" >
                  </div>
                </div>
                <!-- 是否属于二孩/三孩家庭 -->
                <div class="Childrenfamily">
                  <!-- 单选框 -->
                  <div class="FamilyradioChange">
                    <!-- 文字 -->
                    <div class="familyText">是否属于二孩/三孩家庭</div>
                    <!-- 选择框 -->
                    <div class="FamilyRadio">
                      <van-radio-group v-model="Familyradio" direction="horizontal">
                        <van-radio name="1">是</van-radio>
                        <van-radio name="2">否</van-radio>
                      </van-radio-group>
                    </div>
                  </div>
                  <!-- 如果是可以享受赠送活动 -->
                  <div class="activeEnjoy">
                    <span class="star">*</span>
                    <span class="starText">如果是可以享受赠送活动</span>
                  </div>
                </div>
              </div>
            </van-tab>
          </van-tabs>
        </div>
      </div>
      <!-- 其他项目 -->
      <div class="exatproject">
        <div class="paymentWay">店内项目</div>
        <div class="tabye">
          <div class="insureTepy">项目名称</div>
          <div class="shouPrice">活动价</div>
        </div>
        <!-- 收入框 -->
        <div class="inputText">
          <input class="inoutLeft" type="text" v-model="inputEaxt" placeholder="请输入项目内容">
          <input class="inputRight" type="text" v-model="inputEaxt" placeholder="请输入">
        </div>
        <!-- 添加项目 -->
        <div class="addBox">
          <div class="addBoxCenter">
              <div class="addIcon">
                   <van-icon size="25" name="plus" color="#3C80F1" />
              </div>
            <div class="adddText">添加项目</div>
           </div>
        </div>
      </div>
      <!-- 底部的两个按钮 -->
      <div class="buttomBox">
        <!-- 中间的盒子 -->
        <div class="buttonCenter">
          <div class="buttomLeft">保存</div>
          <div class="buttomRight" @click="priceM">生成报价单</div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { accountYearsMoeny, GetOldInformation, GetOldColor, getBank, getprice, creaditInfo, InitInsureBank } from '@/api/comput'
export default {
  data () {
    return {
      // value: '',
      imgSrc: require('../assets/顶部背景-蓝.png'),
      imgCenter: require('../assets/儿童摄影可爱高清壁纸 - 1.jpg'),
      showLeft: true,
      showRight: false,
      text: '',
      // 日历的值
      value: '',
      showCalendar: false,
      // 颜色选择器
      colorvalue: '',
      colorcolumns: [],
      showPicker: false,
      // 支付方式
      activeName: 'a',
      // 贷款银行
      bank: '',
      showPickerbank: false,
      columnsbank: [],
      radio: '1',
      // 矩形的单选框
      radioreact: '1',
      // 保险tab页
      InsureactiveName: 'a',
      carBoatValue: 0,
      // 新车优惠价
      newCarCoupon: '',
      // 计步器的值
      WalkValue: '',
      // 单选框
      Familyradio: '1',
      // 其他项目
      Exatactive: 'a',
      inputEaxt: '',
      // 期数的数组
      rateData: [],
      // 利率的全部参数
      rateDataArray: [],
      // 年利率用的参数
      rateInfo: {
        customRateId: '',
        policyId: '',
        customRate: ''
      },
      selected: 6,
      customRate: '',
      slidervalue: 0,
      // 旧车信息表单
      oldData: {
        oldCarPlateNumber: '',
        oldCarVin: '',
        createDate: '',
        oldCarMileage: '',
        oldCarColor: '',
        purchPrice: '',
        replaceSubsidy: ''
      },
      // 客户信息
      custInfo: {
        custName: '阿甘',
        custPhone: '18736718228'
      },
      // 获取颜色的值
      color: '2302',
      // 价格
      priceData: [],
      editshow: false,
      // 信贷产品
      creitBank: {
        bankCode: '',
        bankType: '',
        modelCode: this.$store.state.modelCode,
        reqType: '1'
      },
      creitBankSecond: {
        bankCode: '',
        bankType: '',
        modelCode: this.$store.state.modelCode,
        reqType: '2',
        policyDuration: ''
      },
      initbankData: [],
      // 利率的id
      customRateId: '',
      fristPayment: 0,
      disabledChange: false,
      checkradioFuaa: [],
      boxchangeRateShow: false,
      stepvalue: 0,
      controlEnd: false,
      controlDi: false,
      // 数组
      ArrayDataEnd: [],
      // 弹框值得最大值跟最小值
      MinValue: '',
      MaxValue: '',
      // 控制尾款输入
      ControlShowInputEnd: true,
      // 首付比例最大最小值
      payMaxRatio: 100,
      payMinRatio: 0,
      dataI: 0,
      // 新车金额
      NewPrice: '',
      // 优惠金额
      accountPrice: '',
      monthGong: '',
      months: ''
    }
  },
  computed: {
    carNmae () {
      return this.$store.getters.carAllInfoModel
    },
    // 新车车系和车系
    computeCarNmae () {
      return this.$store.getters.computeCaename
    }
    // 新车指导价
    // NewPrice(){

    // }
  },
  created () {
    this.GetInfoOld()
  },
  methods: {
    confirmClick () {
      this.editshow = false
    },
    async GetInfoOld () {
      this.NewPrice = this.$store.state.NewPrice
      console.log(this.$store.state.NewPrice)
      console.log(this.$store.getters.carAllInfoModel)
      const { data } = await GetOldInformation(this.custInfo)
      console.log(data)
      this.oldData = data.data[0]
      // 获取颜色
      const color = await GetOldColor(this.color)
      console.log(color)
      color.data.forEach((item, index) => {
        this.colorcolumns[index] = item.codeDesc
      })
      // 获取银行数据
      const bank = await getBank()
      console.log(bank.data.data)
      this.dataBnak = bank.data.data
      bank.data.data.forEach((item, index) => {
        this.columnsbank[index] = item.bankName
      })
      // 初始化银行配置信息
      const BankInfo = await InitInsureBank()
      // console.log(BankInfo.data.data)
      console.log(BankInfo.data.data)
      this.initbankData = BankInfo.data.data
    },
    // 获取颜色
    async getpriceaa () {
      const { data } = await getprice({ vin: this.oldData.oldCarVin })
      this.priceData = JSON.parse(data.data.historyDealerBuyList)
      this.oldData.purchPrice = this.priceData[0].soldPrice
    },
    aaaa () {
      window.console.log(this.carBoatValue)
    },
    clickIdear () {
      this.showLeft = true
      this.showRight = false
    },
    cliclOldCar () {
      this.showLeft = false
      this.showRight = true
    },
    onConfirm (date) {
      this.oldData.createDate = `${date.getFullYear()}-${date.getMonth() + 1}-${date.getDate()}`
      this.showCalendar = false
    },
    // 颜色选择器
    onConfirmColor (value) {
      this.oldData.oldCarColor = value
      this.showPicker = false
    },
    // 银行的选择器
    async onConfirmbank (value) {
      this.bank = value
      console.log(value)
      // 在拿到值以后要遍历循环对应的数组，然后拿到code跟type
      this.dataBnak.forEach((item, index) => {
        if (item.bankName === value) {
          console.log(item)
          this.creitBank.bankCode = item.bankCode
          this.creitBank.bankType = item.bankType
          // 第二次请求需要的数据
          this.creitBankSecond.bankCode = item.bankCode
          this.creitBankSecond.bankType = item.bankType
          // 赋值code和type表单
        }
        console.log(this.creitBank)
      })
      // 请求银行的产品
      try {
        const { data } = await creaditInfo(this.creitBank)
        console.log(data.data)
        // 获取利率的全部信息数组
        console.log(data.data)

        this.rateDataArray = data.data
        // data.data.forEach((item, index) => {
        //   this.rateData[index] = item.policyDuration
        // })
      } catch (err) {
        this.$toast('获取失败')
      }
      this.showPickerbank = false
    },
    // 报价单跳转
    priceM () {
      this.$router.push('/account')
    },
    async SelectClick (item, index) {
      this.selected = index
      console.log(item.policyDuration)
      this.creitBankSecond.policyDuration = item.policyDuration
      console.log(this.creitBankSecond)
      // 再次请求接口
      try {
        const { data } = await creaditInfo(this.creitBankSecond)
        this.ArrayDataEnd = data.data
        console.log(data)
        this.controlEnd = false
        this.controlDi = false
        this.months = ''
        this.carBoatValue = 0
        // console.log(data.data.rate)
        if (data.data.length === 1) {
          this.months = data.data[0].policyDuration
          if (data.data[0].payMaxRatio !== '' && data.data[0].payMaxRatio !== null) {
            this.payMaxRatio = parseInt(data.data[0].payMaxRatio)
          } else {
            this.payMaxRatio = parseInt(100)
          }

          this.payMinRatio = parseInt(data.data[0].payMinRatio)
          this.slidervalue = parseInt(data.data[0].payMinRatio)
          if (data.data.rate !== 'ZDY') {
            console.log(data.data[0].rate)
            console.log(this.rateInfo)
            this.rateInfo.customRate = data.data[0].rate
            console.log(this.rateInfo)
            this.disabledChange = true
          } else if (data.data.customRate !== '' && data.data.customRate !== null) {
            this.disabledChange = false
            this.rateInfo.customRate = data.data.customRate.customRate
          } else {
            this.disabledChange = false
            this.rateInfo.customRate = ''
          }
          this.fristPayment = this.newCarCoupon * this.slidervalue * 0.01
        } else {
          data.data.forEach((item, index) => {
            if (item.finalMaxRatio > 0 || item.finalMinRatio > 0) {
              this.controlEnd = true
              if (item.tate === 'ZDY') {
                this.controlDi = true
              }
            } else {
              this.dataI = 0
              //  console.log('1111', i)
              if (item.rate !== 'ZDY') {
                this.dataI = index
                // console.log(item.rate, '3333   ', index)
                this.disabledChange = true
                // this.rateInfo.customRate = item.rate
                // console.log(this.controlDi, '3333  controlDi ', index)
              } else if (item.customRate !== '' && item.customRate !== null) {
                this.controlDi = true
                // this.rateInfo.customRate = item.customRate.customRate
              } else {
                this.controlDi = true
                this.rateInfo.customRate = ''
              }
            }
            // console.log(this.controlDi, '5555  controlDi ', index)
            // if (item.tate === 'ZDY') {
            //   this.controlDi = true
            // } else {
            //   i = index
            //   console.log('222', i)
            //   if (item.rate !== 'ZDY') {
            //     this.disabledChange = true
            //     this.rateInfo.customRate = item.rate
            //   } else if (item.customRate !== '') {
            //     this.rateInfo.customRate = item.customRate.customRate
            //   } else {
            //     this.rateInfo.customRate = ''
            //   }
            // }
          })
          console.log(this.dataI, ' this.dataI  ')
          this.months = data.data[this.dataI].policyDuration
          if (data.data[this.dataI].rate === 'ZDY') {
            this.disabledChange = false
            this.rateInfo.customRate = ''
          } else {
            this.rateInfo.customRate = data.data[this.dataI].rate
          }
          if (data.data[this.dataI].payMaxRatio === '' || data.data[this.dataI].payMaxRatio === null) {
            this.payMaxRatio = parseInt(100)
            this.slidervalue = parseInt(data.data[this.dataI].payMinRatio)
          } else if (data.data[this.dataI].payMaxRatios === data.data[this.dataI].payMinRatio) {
            this.payMaxRatio = parseInt(data.data[this.dataI].payMaxRatio)
            this.slidervalue = parseInt(data.data[this.dataI].payMaxRatio)
            // console.log('888888', i)
          } else {
            this.slidervalue = parseInt(data.data[this.dataI].payMinRatio)
            this.payMaxRatio = parseInt(data.data[this.dataI].payMaxRatio)
          }
          this.payMinRatio = parseInt(data.data[this.dataI].payMinRatio)
          // this.slidervalue = parseInt(data.data[this.dataI].payMinRatio)
          // console.log(i)
          this.fristPayment = this.newCarCoupon * this.slidervalue * 0.01
        }
        try {
          if (this.rateInfo.customRate !== '' && this.rateInfo.customRate !== null) {
            const peice = await accountYearsMoeny(
              {
                rate: this.rateInfo.customRate * 0.01,
                nper: this.months,
                pv: this.newCarCoupon - this.fristPayment,
                fp: this.carBoatValue
              })
            // console.log('111111111111', peice)
            this.monthGong = peice.data.data
          }
        } catch (err) {
          this.$toast('获取失败')
        }
      } catch (err) {
        this.$toast('获取失败')
      }
      // this.rateInfo.customRateId = item.customRateId
      // this.rateInfo.policyId = item.policyId
      // this.rateInfo.customRate = item.rate
      // vuex传利率
      this.$store.commit('reseiveRate', item.rate)
      // if (item.rate === 0) {
      //   this.disabledChange = true
      // }
      console.log(this.rateInfo)
      console.log(item)
      // console.log('我要清空id')
      // if (index === 0 || index === 1) {
      //   this.yearRate = '0'
      // } else {
      //   this.yearRate = ''
      // }
      // 点击多少期出现利率
      // console.log(index)
      // console.log(item)
      // console.log(this.rateDataArray)
      // 拿到这个数组循环,找到点击的id
      // this.rateDataArray.forEach(item1 => {
      //   console.log(item1)
      //   if (item1.policyDuration === item) {
      //     console.log(item1)
      //     console.log(item1.policyId)
      //     this.rateInfo.customRateId = item1.customRateId
      //     this.rateInfo.policyId = item1.policyId
      //     this.rateInfo.customRate = item1.rate
      //     console.log(item1.rate)
      //   }
      // })
      // try {
      //   const { data } = await custarate()
      //   console.log(data)
      // } catch (err) {
      //   this.$toast('获取失败')
      // }
    },
    // 确定尾款，就能可以在尾款中输入
    async trueHaveMoney (val) {
      this.carBoatValue = 0
      var i = this.dataI
      this.monthGong = ''
      console.log('11111', i)

      val.forEach(item => {
        console.log('ssssssssssss', item)
        if (item === 'a') {
          console.log('2222')
          // 循环数组，取出有返回的值
          this.ArrayDataEnd.forEach((item, index) => {
            if (item.finalMaxRatio !== '' || item.finalMinRatio !== '') {
              // 取出最大和最小的值渲染
              this.MinValue = item.finalMinRatio
              this.MaxValue = item.finalMaxRatio
              this.stepvalue = item.finalMinRatio
              i = index
            }
          })

          // if (this.ArrayDataEnd[i].payMaxRatio === '') {
          //   this.payMaxRatio = 100
          // } else {
          //   this.payMaxRatio = this.ArrayDataEnd[i].payMaxRatios
          // }

          // this.payMinRatio = this.ArrayDataEnd[i].payMinRatio
          // this.slidervalue = this.ArrayDataEnd[i].payMinRatio
          // console.log('99999', i)
          if (this.MinValue === '') {
            this.carBoatValue = 0
          } else {
            this.carBoatValue = this.newCarCoupon * this.MinValue * 0.01
          }
        }
        if (item === 'b') {
          console.log('aaaaaaaaaaaaaa', i)
          // 循环数组，取出有返回的值
          this.ArrayDataEnd.forEach((item, index) => {
            if (item.rate !== 'ZDY') {
              this.disabledChange = true
              this.rateInfo.customRate = item.rate
            } else if (item.customRate !== '' && item.customRate !== null) {
              i = index
              this.disabledChange = false
              this.rateInfo.customRate = item.customRate.customRate
            } else {
              i = index
              this.disabledChange = false
              this.rateInfo.customRate = ''
            }
          })
        }
      })
      console.log('cccccccc  ', i)
      this.months = this.ArrayDataEnd[i].policyDuration
      if (this.ArrayDataEnd[i].payMaxRatio === '' || this.ArrayDataEnd[i].payMaxRatio === null) {
        this.payMaxRatio = parseInt(100)
        this.slidervalue = parseInt(this.ArrayDataEnd[i].payMinRatio)
      } else if (this.ArrayDataEnd[i].payMaxRatios === this.ArrayDataEnd[i].payMinRatio) {
        this.slidervalue = parseInt(this.ArrayDataEnd[i].payMaxRatios)
        this.payMaxRatio = parseInt(this.ArrayDataEnd[i].payMaxRatios)
        console.log('99999', i)
      } else {
        this.payMaxRatio = parseInt(this.ArrayDataEnd[i].payMaxRatios)
        this.slidervalue = parseInt(this.ArrayDataEnd[i].payMinRatio)
      }
      this.payMinRatio = parseInt(this.ArrayDataEnd[i].payMinRatio)
      // this.slidervalue = parseInt(this.ArrayDataEnd[i].payMinRatio)
      this.fristPayment = this.newCarCoupon * this.slidervalue * 0.01
      console.log('dddd  this.payMaxRatio   ', this.payMaxRatio)
      console.log('fffff  this.payMaxRatio   ', this.payMaxRatio)
      console.log('ggggg  this.slidervalue   ', this.slidervalue)
      try {
        if (this.rateInfo.customRate !== '') {
          const peice = await accountYearsMoeny(
            {
              rate: this.rateInfo.customRate,
              nper: this.months,
              pv: this.newCarCoupon - this.fristPayment,
              fp: this.carBoatValue
            })
          console.log('111111111111        ', peice)
          this.monthGong = peice.data.data
        }
      } catch (err) {
        this.$toast('获取失败')
      }
    },

    // 利率输入提交接口
    Ratechange (value) {
      this.$store.commit('reseiveRate', value)
      console.log(this.$store.state.rate)
      // if (value === '0') {
      //   this.disabledChange = true
      // } else {
      //   this.disabledChange = false
      // }
      // console.log(value)
      //   const { data } = await custarate(this.rateInfo)
      //   console.log(data.data)
      //   this.rateInfo.customRateId = data.data.customRateId
      //   this.customRateId = data.data.customRateId
      // } catch (err) {
      //   this.$toast('获取失败')
      // }
      console.log(value)
      // try {
      //     if (this.rateInfo.customRate >0) {
      //       const price = await accountYearsMoeny(
      //         {
      //           rate: this.rateInfo.customRate * 0.01,
      //           nper: this.months,
      //           pv: this.newCarCoupon - this.fristPayment,
      //           fp: this.carBoatValue
      //         })
      //       // console.log('111111111111', peice)
      //       this.monthGong = price.data.data
      //     }
      //   } catch (err) {
      //     this.$toast('获取失败')
      //   }
    },
    onPercentChange (per) {
      console.log(per)
    },
    onChange (value) {
      this.slidervalue = value
      this.fristPayment = this.newCarCoupon * value * 0.01
      console.log(this.slidervalue)
    },
    editClick () {
      this.editshow = true
    },
    selectCattype () {
      this.$router.push('/carname')
    },
    // 新车车型，跳转到新车车系
    NewcarModel () {
      this.$router.push('/computeserise')
    },
    ClickInputNewCar (e) {
      // this.e.target.value
      console.log(e.target.value)
      this.fristPayment = e.target.value * this.slidervalue * 0.01
      // 优惠金额
      this.accountPrice = this.NewPrice - e.target.value
    },
    boxchangeRate () {
      if (this.MaxValue !== '' || this.MinValue !== '') {
        this.boxchangeRateShow = true
      } else {
        this.boxchangeRateShow = false
      }
    },
    changeRateClose () {
      if (this.stepvalue === '') {
        this.carBoatValue = 0
      } else {
        this.carBoatValue = this.newCarCoupon * this.stepvalue * 0.01
      }
      this.boxchangeRateShow = false
    }
    // 增加类型
    // async addInsuresBnak () {
    //   try {
    //     const { data } = await addInsuresBank()
    //     console.log(data)
    //   } catch (err) {
    //     this.$toast('获取失败')
    //   }
    // }
  }
}
</script>
<style lang="less" scoped>
.bestbox{
   background-color: #377df1;
  .topbox{
    position: relative;
    width: 375px;
    height: 150px;
    .editInfo{
      margin-top: 50px;
      margin-left: 20px;
    }
    .confrimedit{
      font-size: 16px;
      float: right;
      padding-right: 10px;
      padding-top: 10px;
    }
    .topCenter{
      position: absolute;
      top: 47px;
      left: 137px;
      font-size: 12px;
      text-align: center;
      .pictrue{
       width: 60px;
       height: 60px;
       border-radius: 60px;
       margin: 0 auto;
       line-height: 60px;
       overflow: hidden;
       border: 2px solid #ffff;
      }
      .Text{
        width: 42px;
        height: 16px;
        line-height: 16px;
        margin: 0 auto;
        margin-top: 20px;
        font-size: 16px;
        color: #ffff;
      }
      .number{
        font-size: 16px;
        color: #ffff;
        margin-top: 20px;
      }
    }
    .editText{
      position: absolute;
      bottom: 70px;
      right: 20px;
      font-size: 14px;
      color: #FFFF;
    }
  }
  .CenterText{
    position: relative;
    background-image: url(../assets/背景-云-渐变蓝.png);
    background-size:100% 100%;
    background-repeat:no-repeat;
    border: 1px solid #377df1;
    .selectIdear{
    position: absolute;
    top: 75px;
    left: 50px;
    font-size: 22px;
    width: 90px;
    height: 50px;
    }
    .oldcarInfo{
       position: absolute;
      top: 0px;
      right: 30px;
      font-size: 22px;
      width: 100px;
      height: 50px;
      margin-top: 75px;
      margin-left: 80px;
    }
    .centerLeftPictrue{
      display: flex;
      justify-content: center;
      width: 350px;
      height: 325px;
      margin: 0 auto;
      margin-top: 50px;
      // background-color: pink;
      text-align: center;
      background-image: url(../assets/切换按钮-标题-选购意向.png);
      background-size:100% 100%;
       background-repeat:no-repeat;
    }
     .inputText{
          width: 80px;
          height: 32px;
          // opacity: 0.99;
          border: 1px solid #E5E5E5;
           font-size: 16px;
           text-align: center;
           line-height: 32px;
           outline: none;
          -webkit-appearance: none;
          -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
        }
    .aaaa{
        width: 300px;
        height: 180px;
        margin-top: 100px;
        .carname{
          width: 200px;
          height: 50px;
          text-align: center;
          line-height: 50px;
          font-size: 16px;
          font-weight:700;
          margin-left: 50px;
          margin-bottom: 20px;
          border-bottom: 2px solid #959595;

        }
        .selectCar{
          font-size: 14px;
          margin-top: 10px;
          color: #999999;
        }
        .exatInfo{
          font-size: 14px;
        }
        .exatInfochange{
          font-size: 14px;
          color: #e8541e;
        }
        .exatInfocu{
          font-size: 15px;
          font-weight: 700;
        }
        .dazhe{
          color: #999999;
          font-size: 15px;
        }
        .youhuimoeny{
          font-size: 15px;
           color: #e8541e;
           font-weight: 700;
        }

      }
      .gainPrice{
          height: 20px;
          width: 50px;
          font-size: 12px;
          border: 1px solid #4a89f2 ;
          color: #4a89f2;
          background-color: #ebf2fd;
        }
        .changeGain{
          font-size: 16px;
          text-align: left;
          padding-left: 15px;
          color: #646566;
          margin-top: 10px;
          font-weight: 700;
        }
    .centerRightPictrue{
      display: flex;
      justify-content: center;
      align-items: center;
      width: 350px;
      height: 550px;
      margin: 0 auto;
      margin-top: 50px;
      background-image: url(../assets/切换按钮-标题-旧车信息.png);
       background-size:100% 100%;
        background-repeat:no-repeat;
       .rightaear{
        width: 300px;
        height: 400px;
        text-align: center;
         .carname{
          width: 200px;
          height: 50px;
          text-align: center;
          line-height: 50px;
          font-size: 16px;
          font-weight:700;
          margin-left: 50px;
          border-bottom: 2px solid #959595;
          margin-top: 25px;
        }
        .selectCar{
          font-size: 14px;
          margin-top: 10px;
          color: #999999;
        }
       }
      .carInfomationCentex{
        top: 80px;
        right: 15px;
        width: 300px;
        height: 460px;
        border: 1px solid pink;
      }
    }
    .paySumit{
      position: relative;
      .paymentWay{
        position: absolute;
        top: -18px;
        left: 42px;
        width: 254px;
        height: 34px;
        font-size: 18px;
        line-height: 34px;
        text-align: center;
        color: #ffffff;
        background-image: url(../assets/标题色块.png);
        background-repeat:no-repeat;
      }
      width: 330px;
      border-radius: 10px;
      margin: 0 auto;
      background-color: #ffff;
    .tabBoxVant{
        padding-top: 30px;
        margin-top: 30px;
      }
      .payMentMony{
        padding-top: 30px;
        padding-bottom: 20px;
      }
      .Credit{
        text-align: center;
      }
      // .yeartateInout{
      // margin-top: 20px;
      // }
      .BoxSlider{
          display: flex;
          justify-content: space-between;
          margin: 0 auto;
          margin-top: 10px;
          width: 300px;
          height: 20px;
          .sliderLeft{
            width: 230px;
            height: 24px;
            line-height: 24px;
            text-align: center;
            // background-color: blue;
            margin-top: 5px;
          }
          .sliderRight{
            width: 30px;
            height: 24px;
            line-height: 24px;
            text-align: center;
            font-size: 12px;
            // background-color: gray;
          }
      }
      .qishuBoxwai{
        display: flex;
        justify-content: center;
        align-items: center;
        width: 320px;
        margin: 0 auto;
        margin-top: 20px;
        .Seletedbox{
          width: 32px;
          height: 32px;
          font-size: 12px;
          border-radius: 10px;
          border: 1px solid #4b95f9;
          text-align: center;
          line-height: 30px;
          // margin-left: 20px;
          margin: 0 15px 0 15px;
          color: #4e92f2;
        }
        .selected{
          background-color: #4e92f2;
          color: #ffff;
          font-size: 12px;
          font-weight: 700;
        }
      }
      .yearsRateAndCheck{
        display: flex;
        // .yeartateInout{
        //   // width: 200px;
        //   // margin-top: 20px;
        //   // line-height: 200px;
        //   // background-color: pink;
        // }
        .checkBox{
          width: 120px;
          font-size: 14px;
          // background-color: blue;
          .van-checkbox{
           margin-bottom: 7px;
          }
        }
      }
      .paymony{
        color: #333333;
        font-weight: 700;
        font-size: 17px;

      }
      .moneyDetail{
        font-size: 15px;
        color:#e8541e;
        font-weight: 700;
      }

      .bankRate{
        display: flex;
        margin-top: 20px;
        .bankRatefrist{
        position: relative;
        width: 100px;
        height: 105px;
        font-size: 14px;
        background-image: url(../assets/信贷利率背景1.png);
         background-repeat:no-repeat;
        margin-left: 9px;
        }
        .radiobox{
          position: absolute;
          top: 10px;
          right: 10px;
          background-color: #fff;
          border-radius: 10px;
        }
        .kongxin{
          position: absolute;
          top: 30px;
          left: 42px;
          width: 10px;
          height: 15px;
          font-family: HelveticaNeue-MediumItalic, HelveticaNeue;
          border-radius: 50%;
          border: 3px solid #ffff;
        }
        .yearsRate{
          position: absolute;
          bottom: 20px;
          left: 30px;
          // width: 47px;
          height: 17px;
          font-size: 12px;
          font-family: HelveticaNeue-MediumItalic, HelveticaNeue;
          font-weight: normal;
          color: #FFFFFF;
          line-height: 15px;
        }
       .bankRatesecond{
         position: relative;
        width: 100px;
        height: 105px;
        font-size: 14px;
        margin-left: 5px;
        background-image: url(../assets/信贷利率背景2.png);
         background-repeat:no-repeat;
       }
       .bankRatetheri{
         position: relative;
        width: 100px;
        height: 105px;
        font-size: 14px;
        margin-left: 5px;
        background-image: url(../assets/信贷利率背景3.png);
         background-repeat:no-repeat;
       }
      }
      .checkMore{
        margin-top: 16px;
        color: #3c80f1;
        font-size: 12px;
      }
      .Rectangle{
        .Rectangleaa{
          position: relative;
          margin: 0 auto;
          width: 300px;
          height: 64px;
          background-image: url(../assets/信贷利率4-绿.png);
           background-repeat:no-repeat;
        }
        .textrateaa{
          position: absolute;
          top: 17px;
          left: 28px;
          width: 68px;
          height: 20px;
          font-size: 14px;
          font-family: HelveticaNeue-MediumItalic, HelveticaNeue;
          font-weight: normal;
          color: #FFFFFF;
          line-height: 17px;
        }
        .standarprice{
          position: absolute;
          top: 38px;
          left: 28px;
          width: 150px;
          height: 14px;
          font-size: 10px;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: #FFFFFF;
          line-height: 14px;
          }
        .radioBoxaa{
          position: absolute;
          top: 26px;
          right: 22px;
          background-color: #ffffff;
          border-radius: 10px;
        }
        .editButton{
          position: absolute;
          top: 7px;
          right: 80px;
          width: 11px;
          height: 11px;
          img{
            width: 100%;
            height: 100%;
          }
        }
        .Rectanglebb{
          position: relative;
           margin: 0 auto;
          width: 300px;
          height: 64px;
          background-image: url(../assets/信贷利率5-浅蓝.png);
           background-repeat:no-repeat;
        }
        .Rectanglecc{
          position: relative;
           margin: 0 auto;
          width: 300px;
          height: 64px;
          background-image: url(../assets/信贷利率6-红.png);
           background-repeat:no-repeat;
        }
        .Rectangledd{
          position: relative;
           margin: 0 auto;
          width: 300px;
          height: 64px;
          background-image: url(../assets/信贷利率7-紫红.png);
           background-repeat:no-repeat;
          .Elasticity{
          position: absolute;
          top: 24px;
          left: 28px;
          width: 160px;
          height: 20px;
          font-size: 14px;
          font-family: HelveticaNeue-MediumItalic, HelveticaNeue;
          font-weight: normal;
          color: #FFFFFF;
          line-height: 17px;
          }
          .teax0{
          position: absolute;
          top: 14px;
          right: 59px;
          width: 48px;
          height: 40px;
          font-size: 30px;
          font-family: HelveticaNeue-MediumItalic, HelveticaNeue;
          font-weight: normal;
          color: #FFFFFF;
          font-style: italic;
          line-height: 40px;
          }
          .TextPercentage{
            position: absolute;
            top: 20px;
            right: 38px;
            width: 48px;
            height: 40px;
            font-size: 12px;
            font-family: HelveticaNeue-MediumItalic, HelveticaNeue;
            font-weight: normal;
            color: #FFFFFF;
            line-height: 40px;
          }
        }
      }
      .fristpayRate{
        font-size: 18px;
        font-family: PingFangSC-Semibold, PingFang SC;
        font-weight: 600;
        color: #333333;
      }
      // 进度条
      // .progress{
      //   margin: 0 auto;
      //   margin-top: 18px;
      //   width: 299px;
      //   height: 8px;
      // }
      .centerBestlow{
        display: flex;
        margin-top: 50px;
        .lowaa{
          flex: 1;
        }
         .lowbb{
          flex: 1;
          border-left: 1px solid #B0B0B0;
          border-right: 1px solid #B0B0B0;
        }
         .lowcc{
          flex: 1;
        }
        // 盒子中的公共部分
         .fristPatment{
          width: 80px;
          height: 20px;
          font-size: 18px;
          font-family: PingFangSC-Semibold, PingFang SC;
          font-weight: 600;
          color: #333333;
          line-height: 20px;
          margin: 0 auto;

          }
          .PaymentPrice{
            width: 100px;
            height: 30px;
            line-height: 30px;
            margin: 0 auto;
            margin-top: 11px;
            margin-bottom: 20px;

            .yearsRate{
              width: 60px;
              height: 30px;
              font-size: 18px;
              line-height: 20px;
              text-align: center;
              border: 1px solid #ebedf0;
              outline: none;
              -webkit-appearance: none;
              -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
            }
          }
          .CloseChangeRate{
            float: right;
            padding-right: 10px;
            padding-top: 10px;
            font-size: 18px;
          }
          .stepBoxLength{
            display: flex;
            justify-content: center;
            width: 250px;
            height: 40px;
            line-height: 40px;
            text-align: center;
            // background-color: pink;
            margin:  0 auto;
            margin-left: 10px;
            margin-top: 100px;
            .stepLeft{
              width: 50px;
              height: 30px;
              font-size: 16px;
              line-height: 30px;
            }
            .stepCenter{
              width: 100px;
              height: 30px;
              font-size: 16px;
              line-height: 30px;
            }
            .stepRight{
              width: 50px;
              height: 30px;
              font-size: 16px;
              line-height: 30px;
            }
          }
          .pricedetailaa{
            font-size: 20px;
            color: #D33939;
            font-weight:700;
            }
          .pricedetailbb{
              font-size: 12px;
              color:#333333;
              margin-left: 5px;
            }
      }
    }
     // 保险服务
    .insuranceaa{
      position: relative;
      width: 330px;
      border-radius: 10px;
      margin: 0 auto;
      background-color: #ffff;
      margin-top: 60px;
      .paymentWay{
        position: absolute;
        top: -18px;
        left: 42px;
        width: 254px;
        height: 34px;
        font-size: 18px;
        line-height: 34px;
        text-align: center;
        color: #ffffff;
        background-image: url(../assets/标题色块.png);
         background-repeat:no-repeat;
      }
      .insureTab{
        padding-top: 44px;
        .tabAText{
          display: flex;
          justify-content: space-between;
          margin: 0 auto;
          margin-top: 30px;
          width: 280px;
          height: 20px;
          border-bottom: 1px solid #FC7F03;
          .insureTepy{
            width: 80px;
            height: 20px;
            background-image: url(../assets/矩形.png);
             background-repeat:no-repeat;
            background-size:100% 100%;
            background-repeat:no-repeat;
            font-size: 14px;
            color: #ffff;
            text-align: center;
          }
          .shouPrice{
            width: 52px;
            height: 20px;
            font-size: 14px;
            text-align: right;
          }
        }
        .insureTextInfo{
           width: 280px;
           margin: 0 auto;
           margin-top: 22px;
          // background-color: pink;
        }
      }
      // 输入框的公共区域
      .insureTextInfo{
        display: flex;
        justify-content: space-between;
        width: 280px;
        height: 45px;
        border-bottom: 1px solid #E5E5E5;
        line-height: 45px;
        .carBoatprice{
          font-size:16px ;
          width: 105px;
          height: 16px;
          color: #333333;
        }
        // 驾乘险的长度额外设置
        .carBoatpriceexst{
           font-size:16px ;
          width: 50px;
          height: 16px;
          color: #333333;
        }
        .PedometerWalk{
          width: 100px;
          height: 32px;
          line-height: 40px;
        }
        .inputText{
          width: 80px;
          height: 32px;
          // opacity: 0.99;
          border: 1px solid #E5E5E5;
           font-size: 16px;
           text-align: center;
           line-height: 32px;
           outline: none;
          -webkit-appearance: none;
          -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
        }

      }
      .addBox{
        display: flex;
        justify-content: center;
        width: 280px;
        margin: 0 auto;
        margin-top: 25px;
        padding-bottom: 30px;
        .addBoxCenter{
          display: flex;
          width: 109px;
          height: 32px;
          border-radius: 4px;
          opacity: 0.99;
          border: 1px solid #3C80F1;
          .addIcon{
            height: 32px;
            width: 32px;
            font-size: 14px;
            line-height:32px;
            text-align: center;
            padding-top: 3px;
          }
          .adddText{
            height: 32px;
            width: 80px;
            text-align: center;
            line-height: 32px;
            font-size: 16px;
            color:#3C80F1;
            padding-top: 1px;
          }
        }
      }
      // 保险服务右边的tab栏
      .rightInput{
        display: flex;
        justify-content: space-between;
        width: 280px;
        height: 68px;
        margin: 0 auto;
        margin-top: 10px;
        border-bottom: 1px solid #e6e6e6;
        .rightIputBoxR{
          .rightIputshang{
            width: 90px;
            height: 30px;
            font-size: 16px;
            font-weight: 700;
            line-height: 30px;
            text-align: center;
          }
          .rightIputxia{
            display: flex;
            justify-content: space-between;
            width: 86px;
            height: 30px;
            line-height: 30px;
            text-align: center;
            .comBackprice{
             width: 52px;
             height: 30px;
              font-size: 14px;
              line-height: 33px;
              text-align: center;
              color: #D33939;
              background-color: #faebeb;
            }
            .comBackdigi{
              width: 44;
              height: 30px;
              font-size: 16px;
              line-height: 30px;
              text-align: center;
              color: #D33939;
              font-weight: 700;
            }
          }
        }
        .rightIputBoxL{
          width: 82px;
           height: 68px;
           text-align: center;
           line-height: 50px;
           .inputText{
             width: 80px;
             height: 32px;
             font-size: 14px;
             text-align: center;
             border: 1px solid #E5E5E5;
           }
        }
      }
      // 是否属于二孩/三孩的家庭
      .Childrenfamily{
        width: 280px;
        height: 68px;
        margin: 0 auto;
        margin-top: 10px;
        // background-color: pink;
        .FamilyradioChange{
          display: flex;
          justify-content: space-between;
          .familyText{
            width: 160px;
            height: 20px;
            font-size: 14px;
            line-height: 20px;
          }
          .FamilyRadio{
            padding-left: 20px;
            width: 120px;
            height: 20px;
            font-size: 14px;
          }
        }
        .activeEnjoy{
          font-size: 12px;
          width: 190px;
          height: 14px;
          margin-top: 10px;
          .starText{
            width: 170px;
            height: 14px;
            line-height: 14px;
            color: #a0a0a1;
          }
          .star{
            display: inline-block;
            width: 10px;
            height: 14px;
            color: red;
          }
        }
      }
    }
    // 其他项目
    .exatproject{
      position: relative;
      width: 330px;
      border-radius: 10px;
      margin: 0 auto;
      background-color: #ffff;
      margin-top: 60px;
       .paymentWay{
        position: absolute;
        top: -18px;
        left: 42px;
        width: 254px;
        height: 34px;
        font-size: 18px;
        line-height: 34px;
        text-align: center;
        color: #ffffff;
        background-image: url(../assets/标题色块.png);
         background-repeat:no-repeat;
      }
      .tabye{
        display: flex;
        justify-content: space-between;
        padding-top: 46px;
        width: 280px;
        margin: 0 auto;
        height: 20px;
        border-bottom: 1px solid #FC7F03;
        .insureTepy{
          width: 80px;
          height: 20px;
          background-image: url(../assets/矩形.png);
           background-repeat:no-repeat;
          font-size: 14px;
          color: #ffff;
          text-align: center;
          }
          .shouPrice{
          width: 52px;
          height: 20px;
          font-size: 14px;
          text-align: right;
          }
      }
      .inputText{
        display: flex;
        justify-content: space-between;
        width: 280px;
        height: 45px;
        margin: 0 auto;
        margin-top: 20px;
        padding-left: 5px;
        .inoutLeft{
          width: 150px;
          height: 32px;
          line-height: 32px;
          font-size: 18px;
          text-align: center;
          border: 1px solid #E5E5E5;
          outline: none;
          -webkit-appearance: none;
          -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
        }
        .inputRight{
           width: 80px;
          height: 32px;
          line-height: 32px;
          font-size: 18px;
          text-align: center;
          border: 1px solid #E5E5E5;
          outline: none;
          -webkit-appearance: none;
          -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
        }
      }
        .addBox{
        display: flex;
        justify-content: center;
        width: 280px;
        margin: 0 auto;
        margin-top: 25px;
        padding-bottom: 30px;
        .addBoxCenter{
          display: flex;
          width: 109px;
          height: 32px;
          border-radius: 4px;
          opacity: 0.99;
          border: 1px solid #3C80F1;
          .addIcon{
            height: 32px;
            width: 32px;
            font-size: 14px;
            line-height:32px;
            text-align: center;
            padding-top: 3px;
          }
          .adddText{
            height: 32px;
            width: 80px;
            text-align: center;
            line-height: 32px;
            font-size: 16px;
            color:#3C80F1;
            padding-top: 1px;
          }
        }
      }
    }
    // 底部的两个盒子
    .buttomBox{
       width: 330px;
      margin: 0 auto;
      margin-top: 60px;
      margin-bottom: 30px;
      .buttonCenter{
        display: flex;
        justify-content: space-between;
        .buttomLeft{
          width: 160px;
          height: 38px;
          font-size: 16px;
          border-radius: 38px;
          line-height: 38px;
          text-align: center;
          background-color: #579df5;
          color: #ffffff;
        }
        .buttomRight{
           width: 160px;
          height: 38px;
          font-size: 16px;
          border-radius: 38px;
          line-height: 38px;
          text-align: center;
          background-color: #579df5;
          color: #ffffff;
        }
      }
    }
  }
}
</style>
